<!doctype html>
<html>
<head>

  <script src="../../platform/platform.js"></script>

  <link href="../../core-icons/core-icons.html" rel="import">
  <link href="../../core-icons/social-icons.html" rel="import">
  <link href="../../core-toolbar/core-toolbar.html" rel="import"> 

  <link href="../../paper-shadow/paper-shadow.html" rel="import">

  <link href="../core-animated-pages.html" rel="import">

  <style shim-shadowdom>
    body {
      font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
      margin: 0;
    }

    .fit {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 420px;
    }

    .toolbar {
      background: #8d3efc;
      /* FIXME */
      color: #fff !important;
      fill: #fff;
    }

    .toolbar-2 {
      position: absolute;
      top: 0;
      left: 0;
      background: #000;
      color: #fff;
      text-align: center;
      font-size: 48px;
    }

    body /deep/ .toolbar-2 {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      width: 420px;
      background: #000;
      color: #fff;
      text-align: center;
      font-size: 48px;
    }

    .container {
      background-color: #e7e7e7;
      padding: 16px;
    }

    .card {
      position: relative;
      background-color: #fff;
      border-radius: 2px;
    }

    .card-top {
      background: #f2da2f;
      height: 240px;
    }

    .card-top-2 {
      background: #99f8b7;
      height: 240px;
    }

    .card-bottom {
      padding: 24px;
    }

    .headline {
      font-size: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .icon {
      position: relative;
      background: #000;
      color: #fff;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .icon::after {
      content: 'T';
      font-size: 24px;
      position: absolute;
      top: 7px;
      left: 13px;
    }

    .source-container {
      margin-top: 16px;
    }

    .two-lines {
      margin-left: 16px;
    }

    .source {
      font-size: 14px;
    }

    .time {
      color: rgba(0, 0, 0, 0.54);
      font-size: 12px;
    }

    .tiles-container {
      margin-top: 16px;
    }

    .tile {
      position: relative;
      display: inline-block;
      width: 85px;
      height: 85px;
      background: #fff;
      border-radius: 2px;
    }

  </style>

</head>
<body unresolved>

  <polymer-element name="shadow-div" noscript>
    <template>
      <style>
        :host {
          display: block;
        }
      </style>
      <paper-shadow target="{{}}" z="1"></paper-shadow>
      <content></content>
    </template>
  </polymer-element>

  <core-animated-pages class="fit" selected="0" transitions="cross-fade-all hero-transition">

    <section id="first">

      <core-toolbar class="tall toolbar">
        <core-icon icon="menu"></core-icon>
        <div flex>Highlights</div>
        <core-icon icon="social:share"></core-icon>
        <core-icon icon="bookmark"></core-icon>
        <core-icon icon="more-vert"></core-icon>
      </core-toolbar>

      <div class="container" hero-p>

        <shadow-div class="card" hero-p onclick="stuff()">
          <div class="card-top"></div>
          <div class="card-bottom" hero-p>
            <div class="headline">Google's Craziest Offices</div>
            <div class="source-container" hero-p layout horizontal center>
              <div class="icon" hero-id="icon-header" hero></div>
              <div class="two-lines">
                <div class="source">The New York Times</div>
                <div class="time">36 minutes ago</div>
              </div>
            </div>
          </div>
        </shadow-div>

        <div class="tiles-container" layout horizontal justified>

          <shadow-div class="tile"></shadow-div>
          <shadow-div class="tile"></shadow-div>
          <shadow-div class="tile"></shadow-div>
          <shadow-div class="tile"></shadow-div>

        </div>

      </div>

    </section>

    <section id="second">

      <core-toolbar class="tall" hero-p>

        <core-toolbar class="tall toolbar-2" hero-id="icon-header" hero>
          <div flex class="middle">T</div>
        </core-toolbar>
      </core-toolbar>

      <div class="container">

        <shadow-div class="card" onclick="stuff()">
          <div class="card-top-2"></div>
          <div class="card-bottom">
            <div class="headline">Some long overflowing headline</div>
            <div class="source-container" layout horizontal center>
              <div class="icon" style="background:red;"></div>
              <div class="two-lines">
                <div class="source">The New York Times</div>
                <div class="time">36 minutes ago</div>
              </div>
            </div>
          </div>
        </shadow-div>

        <div class="tiles-container" layout horizontal justified>

          <shadow-div class="tile"></shadow-div>
          <shadow-div class="tile"></shadow-div>
          <shadow-div class="tile"></shadow-div>
          <shadow-div class="tile"></shadow-div>

        </div>

      </div>

    </section>

  </core-animated-pages>

  <script>

    function stuff(e) {
      var p = document.querySelector('core-animated-pages');
      p.selected = p.selected ? 0 : 1;
    }

  </script>

</body>
</html>
